<!-- 从品牌管理—时间过滤器中复制代码 -->
<!-- s目标: 处理时间 需要下载moment模块 -->
<template>
	<div id="app">
		<div class="container">
			<!-- 顶部框模块 -->
			<div class="form-group">
				<div class="input-group">
					<h4>品牌管理</h4>
				</div>
			</div>

			<!-- 数据表格 -->
			<table class="table table-bordered table-hover mt-2">
				<thead>
					<tr>
						<th>编号</th>
						<th>资产名称</th>
						<th>价格</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<!-- 如果价格超过100，就有red这个类 -->
						<!-- <td :class="{red:item.price > 100 }">{{item.price}}</td> -->

						<!--如果价格超过100，就有red这个类 ，另一种写法 -->
						<td :style="{color:item.price > 100 ? 'red' : '' }">{{item.price}}</td>

						<td>{{item.time | formatTime}}</td>
						<td><a href="#" @click.prevent="removebtn(item.id)">删除</a></td>
					</tr>

					<!-- 不用循环，展示总价 和 平均价 -->
					<tr v-show="list.length !== 0" style="background-color: #EEE">
						<td>统计:</td>
						<td colspan="2">总价钱为:{{total}} </td>
						<td colspan="2">平均价: {{addprice}}</td>
					</tr>
				</tbody>
				<!-- 底部的提示消息 -->
				
					<tfoot >
					  <tr>
						<td colspan="5" style="text-align: center" v-show="list.length === 0">暂无数据</td>
					  </tr>
					</tfoot>
				
			</table>

			<!-- 添加资产 -->
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="资产名称" v-model="name"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="价格" v-model.number="price"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- 阻止表单提交 -->
				<button class="btn btn-primary" @click.prevent="addbtn">添加资产</button>
			</form>
		</div>
	</div>
</template>

<script>
  import moment from 'moment'
	export default {
		data() {
			return {
				name: "", // 名称
				price: 0, // 价格
				list: [{
						id: 100,
						name: "外套",
						price: 199,
						time: new Date('2010-08-12')
					},
					{
						id: 101,
						name: "裤子",
						price: 34,
						time: new Date('2013-09-01')
					},
					{
						id: 102,
						name: "鞋",
						price: 25.4,
						time: new Date('2018-11-22')
					},
					{
						id: 103,
						name: "头发",
						price: 19900,
						time: new Date('2020-12-12')
					}
				],
			};
		},
    methods: {
			addbtn(){
				if(this.name.trim() === '' || this.price <= 0 ){
					return alert('内容不能为空！')
				}
        this.list.push({
				id:+new Date()  ,
				name:this.name,
				price:this.price,
				time:new Date()
				})
				this.name = ''
				this.price= ''
			},
			removebtn(id){
				// let index = this.list.findIndex(item => item.id = id)
				// this.list.splice(index,1)

				//另一种方法  filter (筛选)
				// let arr = this.list.filter(item => item.id !== id)
				// console.log(arr);
				// this.list = arr
				//简写
				this.list = this.list.filter(item => item.id !== id)
				console.log(this.list);
			}
		},
    //过滤器
    filters: {
      formatTime(time){
        return moment(time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
   computed: {
    total(){
      return  this.list.reduce((item,index) => item += index.price ,0).toFixed(2)
    },
    addprice(){
      return  (this.total / this.list.length).toFixed(2)
    }
   }
	};
</script>

<style>
	.red {
		color: red;
	}
</style>
